import { Component } from 'react';

const Demo02 = (Comp1, Comp2) => {
	return class extends Component {
		render() {
			const props = {
				...this.props,
				name: "这是高阶组件--class版"
			};
			return <div className="note-example-box">
			<div className="note-demo-parent-box">
				<Comp1 {...props} />
				<Comp2 {...props} />
			</div>
			<div className="note-code-case">
				<textarea defaultValue={codeVal1} style={{height: '400px'}}></textarea>
				<textarea defaultValue={codeVal2} style={{height: '420px'}}></textarea>
			</div>
		</div>;
		}
    };
}

class InterCom01 extends Component {
	render() {
		const { name } = this.props
		return <div className="note-demo-child-box">
			<div>这是高阶组件的[内部组件1]</div>
			<div>通过高阶组件属性代理的得到的值为{name}</div>
		</div>
	}
}

class InterCom02 extends Component {
	render() {
		const { name } = this.props
		return <div className="note-demo-child-box">
			<div>这是高阶组件的[内部组件1]</div>
			<div>通过高阶组件属性代理的得到的值为{name}</div>
		</div>
	}
}

const codeVal1 = `主组件
const Demo02 = (Comp1, Comp2) => {
	return class extends Component {
		render() {
			const props = {
				...this.props,
				name: "这是高阶组件--class版"
			};
			return <div className="note-example-box">
			<div className="note-demo-parent-box">
				<Comp1 {...props} />
				<Comp2 {...props} />
			</div>
		</div>;
		}
    };
}
export default Demo02(InterCom01, InterCom02)`;
const codeVal2 = `子组件群
class InterCom01 extends Component {
	render() {
		const { name } = this.props
		return <div className="note-demo-child-box">
			<div>这是高阶组件的[内部组件1]</div>
			<div>通过高阶组件属性代理的得到的值为{name}</div>
		</div>
	}
}
class InterCom02 extends Component {
	render() {
		const { name } = this.props
		return <div className="note-demo-child-box">
			<div>这是高阶组件的[内部组件1]</div>
			<div>通过高阶组件属性代理的得到的值为{name}</div>
		</div>
	}
}`;

export default Demo02(InterCom01, InterCom02)
